<template>
  <div>
    <div id='order_echart' ref="myEchart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      chart: null,
      option: {
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value',
          name: '万元',
          nameLocation: 'end'
          // axisPointer: {
          //   show: true
          // }
        },
        title: {
          text: '2018年交易总额： 5250.68万元',
          x: 'right'
        },
        legend: {
          data: ['月总交易额', '女装', '男装', '童装']
        },
        tooltip: {
          trigger: 'axis',
          // formatter: '{b0}: {c0}<br />{b1}: {c1}',
          // position: function () {
          //   var obj = {top: 60}
          //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
          //   return obj
          // },
          axisPointer: {
            animation: false
          }
        },
        series: [{
          name: '月总交易额',
          data: ['361.48', '326.67', '208.50', '474.68', '328.78', '379.97', '456.80', '432.02', '558.80', '395.68', '793.72', '533.60'],
          type: 'line'
        },
        {
          name: '男装',
          data: ['82.30', '95.33', '81.65', '154.94', '55.76', '75.99', '101.36', '66.46', '141.76', '79.13', '180.74', '95.92'],
          type: 'line'
        },
        {
          name: '女装',
          data: ['170.74', '163.33', '34.39', '157.34', '154.39', '179.98', '208.40', '186.01', '309.40', '177.84', '351.86', '287.30'],
          type: 'line'
        },
        {
          name: '童装',
          data: ['108.44', '78.00', '92.45', '162.40', '118.63', '164.00', '147.04', '179.60', '107.64', '138.70', '261.12', '150.38'],
          type: 'line'
        }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.myEchart)
      apiOrderMange.apiOrderStatistical(this.token).then(data => {
        console.log(data)
        if (!data) return
        let count = 0
        data.data.turnover.forEach(item => {
          const sum = item.sum/130000
          count += sum
          // this.option.series[0].data[item.month - 1] = sum.toFixed(2)
          // this.option.series[1].data[item.month - 1] = (sum * 0.2).toFixed(2)
          // this.option.series[2].data[item.month - 1] = (sum * 0.5).toFixed(2)
          // this.option.series[3].data[item.month - 1] = (sum * 0.3).toFixed(2)
        })
        console.log(count)
        // this.option.title.text = `2018年交易总额： ${count.toFixed(2)}万元`
        // 把配置和数据放这里
        this.chart.setOption(this.option)
      })
    }
  }
}
</script>

<style>
#order_echart {
  width: 100%;
  height: 500px;
}
</style>
